<template>
  <view class="page-container">
    <!-- 主内容区 -->
    <scroll-view
        class="main-content"
        scroll-y
        :show-scrollbar="false"
        safe-area-inset-bottom
    >
      <!-- 欢迎语 -->
      <view class="welcome-section">
        <text class="welcome-text">
          嗨，{{ homeData.studentName }} 👋
          <text class="daily-quote">"每日进步一点点"</text>
        </text>
        <text class="welcome-subtext">
          今天也要坚持背单词哦！
        </text>
      </view>

      <!-- 当前词库与进度 -->
      <view class="current-course">
        <view class="section-title study-now-title">
          <text>当前学习</text>
          <u-tag text="进行中" type="primary" size="mini"/>
        </view>
        <view class="course-card active-card">
          <view class="course-info">
            <view class="course-name">
              {{ homeData.nowBookName }}
            </view>
            <view class="course-stats">
              <view class="stat-item">
                <u-icon name="checkmark-circle" color="#4cd964" size="16"></u-icon>
                <text>已学 {{ homeData.studiedNumber }}</text>
              </view>
              <view class="stat-item">
                <u-icon name="list-dot" color="#909399" size="16"></u-icon>
                <text>剩余 {{ homeData.waitStudyNumber }}</text>
              </view>
            </view>
            <view class="motivation">
              <u-icon name="hourglass-half-fill" color="#ff5500" size="18"></u-icon>
              <text>本词库已学习 {{ homeData.learnedDay }} 天</text>
            </view>
          </view>
          <!-- 添加环形进度条 -->
          <view class="progress-circle">
            <CircleProgress
                :progress="homeData.learnedRatio * 1.0"
                progressColor="#4cd964"
                :size="150"
                :thickness="20"
            />
          </view>
        </view>
      </view>

      <!-- 今日任务 -->
      <view class="today-tasks">
        <view class="section-title with-action">
          今日任务
          <text class="action-text" @click="showTaskDetails">查看详情</text>
        </view>
        <view class="tasks-container">
          <!-- 正式课课程 -->
          <view
              class="task-card formal-task active-task"
              v-for="item in homeData.courseList"
          >
            <view class="task-badge" v-if="item.status !== '3'">NEW</view>
            <view class="task-icon">
              <u-icon name="课" color="#ffffff" size="28"></u-icon>
            </view>
            <view class="task-info">
              <view class="task-title">{{ item.courseType }}课程</view>
              <view class="task-desc">{{ item.location }}</view>
              <view class="task-time">
                <u-icon name="clock" color="#909399" size="14"></u-icon>
                <text>约 {{ item.courseDuration }} 分钟</text>
              </view>
            </view>
            <view class="task-status">
              <view class="status-text" :class="{ completed: item.status==='3' }">
                {{ item.status === '3' ? '已完成' : item.status === '0' ? '待上课' : '上课中' }}
              </view>
            </view>
          </view>
          <view
              class="task-card formal-task"
              v-if="!homeData.courseList||homeData.courseList.length===0"
          >
            <view class="task-icon">
              <u-icon name="课" color="#ffffff" size="28"></u-icon>
            </view>
            <text>今日暂无排课</text>
          </view>

          <!-- 抗遗忘课程 -->
          <view class="task-card review-task" v-for="item in homeData.antiForgetList">
            <view class="task-icon">
              <u-icon name="复" color="#ffffff" size="28"></u-icon>
            </view>
            <view class="task-info">
              <view class="task-title">抗遗忘复习</view>
              <view class="task-desc">{{ item.actualStartTime.substring(0, 16) }} 课程 {{ item.name }}</view>
              <view class="task-time">
                <u-icon name="clock" color="#909399" size="14"></u-icon>
                <text>约 10 分钟</text>
              </view>
            </view>
            <view class="task-status" @click="goToReviewCourse(item)">
              <view class="status-text" :class="{ completed: item.status==='2' }">
                {{ item.status === '2' ? '已完成' : '去复习' }}
              </view>
              <u-icon
                  name="arrow-right"
                  color="#606266"
                  size="18"
                  v-if="item.status!=='2'"
              ></u-icon>
              <u-icon
                  name="checkmark-circle"
                  color="#4cd964"
                  size="18"
                  v-else
              ></u-icon>
            </view>
          </view>
          <view class="task-card review-task" v-if="!homeData.antiForgetList||homeData.antiForgetList.length===0">
            <view class="task-icon">
              <u-icon name="复" color="#ffffff" size="28"></u-icon>
            </view>
            <text>今日暂无抗遗忘课程</text>
          </view>
        </view>
      </view>

      <!-- 学习数据 -->
      <view class="study-stats">
        <view class="section-title">学习数据</view>
        <view class="stats-container">
          <view class="stat-item">
            <view class="stat-top">
              <view class="stat-value">{{ homeData.accumulatedLessonsNumber }}</view>
              <view class="stat-unit">次</view>
            </view>
            <view class="stat-label">累计上课</view>
          </view>
          <view class="stat-item">
            <view class="stat-top">
              <view class="stat-value">{{ homeData.cumulativeLearnWordNumber }}</view>
              <view class="stat-unit">词</view>
            </view>
            <view class="stat-label">累计学习</view>
          </view>
          <view class="stat-item highlight">
            <view class="stat-value">{{ homeData.forgettingRate * 1 }}%</view>
            <view class="stat-label">遗忘率</view>
          </view>
          <view class="stat-item">
            <view class="stat-top">
              <view class="stat-value">{{ homeData.cumulativeLearningTime }}</view>
              <view class="stat-unit">小时</view>
            </view>
            <view class="stat-label">时长累计</view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import {oneGlance} from "../api/enStudent";
import CircleProgress from "./components/CircleProgress.vue";
import {startAntiForget} from "../api/antiForget";

export default {
  components: {CircleProgress},
  data() {
    return {
      homeData: {},
      userName: "小明",
      currentCourse: {
        name: "大学英语四级核心词汇",
        totalWords: 3500,
        learnedWords: 876,
        progress: 25
      },
      todayTasks: {
        formalCourse: {
          title: "Unit 8 - 名词与介词搭配",
          completed: false,
          duration: 15
        },
        reviewCourse: {
          title: "复习 Unit 5-7 高频词汇",
          completed: false,
          duration: 10
        }
      }
    };
  },
  created() {
    this.getHomeData();
  },
  methods: {
    async getHomeData() {
      this.homeData = await oneGlance();
    },
    getDifficultyType(difficulty) {
      const map = {
        '简单': 'success',
        '中等': 'warning',
        '较难': 'error'
      };
      return map[difficulty] || 'info';
    },
    goToReviewCourse(item) {
      if (item.status !== '2') {
        startAntiForget({antiForgetId: item.id})
        uni.navigateTo({
          url: `/pages/components/AntiForgetReview?q1=${item.id}&cid=${item.courseId}`
        });
      }
    },
    goToCourseDetail(courseId) {
      uni.navigateTo({
        url: `/pages/course/detail?id=${courseId}`
      });
    },
    goToTipsDetail() {
      uni.navigateTo({
        url: '/pages/tips/detail'
      });
    },
    showTaskDetails() {
      uni.navigateTo({
        url: '/pages/task/detail'
      });
    },
    viewAllCourses() {
      uni.navigateTo({
        url: '/pages/course/list'
      });
    },
    startDailyTest() {
      uni.navigateTo({
        url: '/pages/test/daily'
      });
    }
  }
};
</script>

<style scoped lang="scss">
.page-container {
  background-color: #f5f7fa;
  min-height: 100vh;
  position: relative;
}

.nav-right {
  padding-right: 16rpx;
}

.main-content {
  padding: 24rpx 30rpx 0;
  height: calc(100vh - var(--window-top) - 88rpx);
}

::v-deep uni-scroll-view {
  width: auto !important;
}

.welcome-section {
  margin-bottom: 30rpx;

  .welcome-text {
    font-size: 36rpx;
    font-weight: 600;
    color: #303133;
    display: flex;
    align-items: center;
  }

  .daily-quote {
    font-size: 24rpx;
    color: #606266;
    margin-left: 16rpx;
    font-weight: normal;
  }

  .welcome-subtext {
    font-size: 28rpx;
    color: #606266;
    display: block;
    margin-top: 10rpx;
  }
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #303133;
  margin-bottom: 20rpx;
  position: relative;
  padding-left: 16rpx;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8rpx;
    height: 28rpx;
    background-color: #3e7bfa;
    border-radius: 4rpx;
  }

  &.with-action {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .action-text {
      font-size: 24rpx;
      color: #909399;
      font-weight: normal;
    }
  }
}

.study-now-title {
  display: flex;
}

// 当前课程样式
.current-course {
  margin-bottom: 36rpx;

  .course-card {
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 28rpx;
    display: flex;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;

    &.active-card {
      border: 1px solid rgba(62, 123, 250, 0.2);
      box-shadow: 0 8rpx 24rpx rgba(62, 123, 250, 0.15);

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 8rpx;
        height: 100%;
        background: linear-gradient(to bottom, #3e7bfa, #6ab1ff);
      }
    }
  }

  .course-info {
    flex: 1;
  }

  .progress-circle {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 20rpx;

    .progress-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;

      .percent {
        font-size: 24rpx;
        font-weight: bold;
        color: #3e7bfa;
        line-height: 1.2;
      }

      .progress-label {
        font-size: 20rpx;
        color: #909399;
        margin-top: 4rpx;
      }
    }
  }

  .course-card {
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 28rpx;
    display: flex;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;

    &.active-card {
      border: 1px solid rgba(62, 123, 250, 0.2);
      box-shadow: 0 8rpx 24rpx rgba(62, 123, 250, 0.15);

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 8rpx;
        height: 100%;
        background: linear-gradient(to bottom, #3e7bfa, #6ab1ff);
      }
    }
  }

  .course-info {
    flex: 1;
  }

  .course-name {
    font-size: 30rpx;
    font-weight: 600;
    color: #303133;
    margin-bottom: 14rpx;
    display: flex;
    align-items: center;
  }

  .course-stats {
    display: flex;
    flex-direction: column;
    gap: 12rpx;
    margin-bottom: 16rpx;

    .stat-item {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #606266;

      .u-icon {
        margin-right: 8rpx;
      }
    }
  }

  .motivation {
    display: flex;
    align-items: center;
    font-size: 22rpx;
    color: #ff5500;
    background-color: #fff5f0;
    padding: 6rpx 12rpx;
    border-radius: 20rpx;
    width: fit-content;

    .u-icon {
      margin-right: 6rpx;
    }
  }
}

// 今日任务样式
.today-tasks {
  margin-bottom: 36rpx;

  .tasks-container {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
  }

  .task-card {
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 24rpx;
    display: flex;
    align-items: center;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
    position: relative;
    overflow: hidden;

    &:active {
      transform: scale(0.98);
    }

    &.active-task {
      animation: pulse 2s infinite;
    }

    .task-badge {
      position: absolute;
      top: 10rpx;
      right: -20rpx;
      background-color: #ff5500;
      color: #ffffff;
      font-size: 20rpx;
      padding: 4rpx 24rpx;
      transform: rotate(45deg);
      transform-origin: center;
    }
  }

  .formal-task {
    border-left: 8rpx solid #3e7bfa;
  }

  .review-task {
    border-left: 8rpx solid #ff9500;
  }

  .task-icon {
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 24rpx;
    flex-shrink: 0;
  }

  .formal-task .task-icon {
    background-color: #3e7bfa;
  }

  .review-task .task-icon {
    background-color: #ff9500;
  }

  .task-info {
    flex: 1;
    margin-right: 16rpx;
  }

  .task-title {
    font-size: 28rpx;
    font-weight: 600;
    color: #303133;
    margin-bottom: 6rpx;
  }

  .task-desc {
    font-size: 24rpx;
    color: #606266;
    margin-bottom: 8rpx;
  }

  .task-time {
    display: flex;
    align-items: center;
    font-size: 22rpx;
    color: #909399;

    .u-icon {
      margin-right: 6rpx;
    }
  }

  .task-status {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .status-text {
    font-size: 26rpx;
    margin-right: 12rpx;
  }

  .status-text:not(.completed) {
    color: #3e7bfa;
  }

  .status-text.completed {
    color: #4cd964;
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(62, 123, 250, 0.2);
  }
  70% {
    box-shadow: 0 0 0 20rpx rgba(62, 123, 250, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(62, 123, 250, 0);
  }
}

// 学习数据样式
.study-stats {
  margin-bottom: 36rpx;

  .stats-container {
    display: flex;
    justify-content: space-between;
    gap: 16rpx;
  }

  .stat-item {
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 24rpx 0;
    width: calc(50% - 8rpx);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    position: relative;

    &.highlight {
      background: linear-gradient(to right, #f0f4ff, #ffffff);
      border: 1px solid rgba(62, 123, 250, 0.1);
    }

    .stat-top {
      display: flex;
      align-items: end;
    }
  }

  .stat-value {
    font-size: 42rpx;
    font-weight: 700;
    color: #3e7bfa;
    margin-bottom: 8rpx;
    position: relative;
    display: inline-block;

    &::after {
      content: '';
      position: absolute;
      bottom: -10rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 40rpx;
      height: 4rpx;
      background: linear-gradient(to right, #3e7bfa, #6ab1ff);
      border-radius: 2rpx;
    }
  }

  .stat-label {
    font-size: 24rpx;
    color: #303133;
    margin-top: 10rpx;
    margin-bottom: 4rpx;
  }

  .stat-unit {
    font-size: 22rpx;
    color: #909399;
    margin-left: 10rpx;
  }
}

// 快捷操作按钮
.quick-actions {
  position: fixed;
  bottom: 40rpx;
  right: 40rpx;
  z-index: 99;

  .action-btn {
    background: linear-gradient(to right, #3e7bfa, #6ab1ff);
    border-radius: 50rpx;
    padding: 16rpx 24rpx;
    display: flex;
    align-items: center;
    box-shadow: 0 8rpx 24rpx rgba(62, 123, 250, 0.3);
    color: #ffffff;
    font-size: 24rpx;

    .u-icon {
      margin-right: 8rpx;
    }
  }
}
</style>
